<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!--    <script th:src="@{/js/vue.js}"/>-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

</head>
<body>

<div id="app">
    <h3>app</h3>
    <br>
    <!--  遍历items，再将item的值绑定到val属性中 ，这样组件就可以使用val的到item的值了 -->
    <chunuo v-for="item in items" :val="item" ></chunuo>

    <!--  计算属性：类似于缓存，只有增删改后才重新执行方法加载数据。缓存有数据取缓存中的数据  -->
    <p>time:{{cacheTime}}</p>
    <p>cacheMethod : {{cacheMethod}}</p>

    <!--  ajax请求的数据  -->
    <p>{{info}}</p>

</div>

<!--通信 -->
<div id="app2">
    <h3>app2</h3>
    <br>
    <p>{{info}}</p>
    <button class="btn btn-success" :title="info.name" >提交</button>

</div>


<script>
    //组件 -name：chunuo，自定义标签<chunuo v-for="item in items" :val="item" ></chunuo>
    //标签中要绑定值后，这边才可以使用
    Vue.component("chunuo",{
        props:['val'],
        template:'<li>{{val}}</li>'
    })

    var vue = new Vue({
        el:"#app",
        data:{
            items:['hello','world','!'],
            cacheTime:1,
            info:{
                name:null,
                sex:null,
                age:null
            }
        },
        //属性计算，类是属性缓存，只有在方法的执行过程中，数据变化才会重新执行，一般都再缓存中取数据，
        // 如果有更新数据的话，同时更新this.cacheTime，保证数据的一致性
        computed:{
            cacheMethod:function(){
                this.cacheTime;
                return Date.now();
            }
        },
        //ajax请求指定路径，然后将数据封装到response.data中，再将值存进info中，有个条件是必须把info的对象格式写明
        /*
        info:{
            name:null,
            sex:null,
            age:null
        }
        */
        mounted:function(){
            axios.get("json/user.json").then(response=>{console.log(this.info = response.data)})
        }

    })

    var vue2 = new Vue({
        el:"#app2",
        data:{
            abcd:666
        },
        data(){
            return {
                info:{
                    name:null,
                    sex:null,
                    age:null
                }
            }
        },
        mounted(){
            //ajax请求
            axios.get("json/user.json").then(response=>{this.info=response.data})
        }
    })

</script>

</body>
</html>